const path = require('path');

const devConfig = {
    entry: './demo/index.js', // 入口文件， 最终打开的是这个页面
    mode: 'development', //打包为开发模式
    output: {
        path: path.resolve(__dirname, '../demo'), // 输出的文件目录
        filename: 'demo.bundle.js' // 输出的文件名称, 在 /demo/index.html 里面必须要调用 demo.bundle.js 这个文件
    },
    module: {
        rules: [
            { // 在webpack中使用babel需要babel-loader
                test: /\.(js|jsx)$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            // babel默认不支持react的jsx语法，需要添加另外的编译器
                            presets: [
                                "@babel/preset-env",
                                "@babel/preset-react"
                            ],

                            // 用于识别jsx中的图片资源
                            plugins: [
                                [
                                    "transform-jsx-url",
                                    {
                                        // 目录前缀, 这里是相对于当前配置文件的位置，所以要返回上一层的src目录获取图片
                                        root: '../src',
                                    }
                                ],
                            ]
                        },
                    }
                ]
            },


            // 用于解析css,less
            {
                test: /\.(css|less)$/,
                use: [
                    "style-loader", //使代码中的 import './index.less' 能生效， 生产环境因为要打包出独立css,所以不使用这个组件。
                    "css-loader",
                    {
                        loader: "less-loader",
                        options: {
                            // 用于识别 less 里面 @import 引用的 其他样式
                            lessOptions:{
                                javascriptEnabled: true
                            }
                        }
                    }
                ]
            },

            // 用于加载组件或者css中使用的图片
            {
                test: /\.(png|gif|svg|ico|jpe?g)$/i,
                use: [
                    {
                        //这里用file-loader来处理图片
                        loader: 'file-loader',
                        options: {
                            /**
                             * 如果不设置这个，图片的src 就会变成一个Module对象。
                             *   因为transform-jsx-url会把 <img src="../logo.png" /> 转换为 <img src={require('../logo.png')} />
                             * */
                            esModule: false,

                            name: '[name].[ext]',
                            outputPath: './assets'
                        }
                    }
                ],
            }
        ]
    },

    // 该字段用于配置webpack-dev-server
    devServer: {
        contentBase: path.join(__dirname, '../demo'),
        compress: true,
        port: 9000, // 端口9000
        open: false // 自动打开浏览器
    }
}

module.exports = devConfig;
